<template>
  <el-tabs v-model="editableTabsValue" type="card" editable @tab-remove="removeTab" @tab-click="clickTab">
    <el-tab-pane
      :key="item.name"
      v-for="(item) in editableTabs"
      :label="item.title"
      :name="item.name"
    >
    </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    data() {
      return {
        
      }
    },
    methods: {
      // 移除标签
      removeTab(targetName) {
        // 保留首页标签
        if(targetName === 'Index') {
          return
        }

        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;

        if (activeName === targetName) {
            tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                    let nextTab = tabs[index + 1] || tabs[index - 1];
                    if (nextTab) {
                    activeName = nextTab.name;
                    }
                }
            });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        
        this.$router.push({name: activeName})
      },
      // 点击标签
      clickTab(target) {
        /**
         * 这里是个坑，target.name未undefined
         */
        this.$router.push({name: target.paneName})
      }
    },
    computed: {
      // 活动标签
      editableTabsValue: {
        get() {
          return this.$store.state.menus.editableTabsValue
        },
        set(val) {
          this.$store.state.menus.editableTabsValue = val
        }
      },
      // 标签列表
      editableTabs: {
        get() {
          return this.$store.state.menus.editableTabs
        },
        set(val) {
          this.$store.state.menus.editableTabs = val
        }
      }
    }
}
</script>

<style>

</style>